<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dubbo文档详情</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/admin/css/nav.css}"/>

    <style type="text/css">
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 15px;
        }

        .layui-table td, .layui-table th {
            color: #0C0C0C;
            font-size: 15px;
        }

        .code-block {
            background-color: #283142;
            color: white;
            font-size: 16px;
            font-family: Roboto, serif;
        }

        .dubboDocDescription {
            cursor: pointer;
        }

    </style>
</head>
<body>

<div class="layui-container" style="display: none" id="dubboExecuteResult">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>耗时</td>
            <td id="execute-result-time"></td>
        </tr>
        <tr>
            <td>服务方法</td>
            <td id="execute-result-method"></td>
        </tr>
        <tr>
            <td>入参类型</td>
            <td id="execute-result-paramTypes"></td>
        </tr>
        <tr>
            <td>出参类型</td>
            <td id="execute-result-returnType"></td>
        </tr>
        <tr>
            <td>是否成功</td>
            <td id="execute-result-isSuccess"></td>
        </tr>
        <tr>
            <td>异常信息</td>
            <td id="execute-result-errorMessage"></td>
        </tr>
        <tr>
            <td>返回结果</td>
            <td id="execute-result-print"></td>
        </tr>
        </tbody>
    </table>
</div>

<div style="display: none" id="hideDocDiv">
    <div class="layui-row one-row">
        <fieldset class="layui-elem-field onedocument">
            <legend class="methodName"></legend>
            <div class="layui-field-box">
                <!--方法的所在位置-->
                <div class="layui-row code-block" style="margin-top: 1%; height: 60px;line-height: 60px; ">
                    <span style="margin-left: 2%" class="methodLocation"></span>
                </div>
                <br>

                <h3>服务入参<i class="layui-icon layui-icon-rate"
                           style="font-size: 18px; color: #FF5722;font-weight: normal">
                    <span style="font-size: 14px;color: #FF5722">Tip：双击行可以编辑文档 </span></i></h3>
                <table class="layui-table inParamTable" lay-skin="row" lay-size="lg">
                    <colgroup>
                        <col width="250">
                        <col width="250">
                        <col width="250">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数名称</th>
                        <th>参数类型</th>
                        <th>示例值</th>
                        <th>参数说明</th>
                    </tr>
                    </thead>
                    <tbody class="inParamTableBody">
                    </tbody>
                </table>
                <br>
                <!--方法出参-->
                <h3>服务出参<i class="layui-icon layui-icon-rate"
                           style="font-size: 18px; color: #FF5722;font-weight: normal">
                    <span style="font-size: 14px;color: #FF5722">Tip：双击行可以编辑文档 </span></i></h3>
                <br>
                <table class="layui-table outParamTable" lay-skin="row" lay-size="lg">
                    <colgroup>
                        <col width="300">
                        <col width="300">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数类型</th>
                        <th>示例值</th>
                        <th>参数备注</th>
                    </tr>
                    </thead>
                    <tbody class="outParamTableBody">
                    </tbody>
                </table>
                <br>
                <h3>服务备注信息<i class="layui-icon layui-icon-rate"
                             style="font-size: 18px; color: #FF5722;font-weight: normal">
                    <span style="font-size: 14px;color: #FF5722">Tip：双击内容区可以编辑文档 </span></i></h3>
                <br>


                <div class="dubboDocDescription">

                </div>


                <div class="layui-btn-container" style="margin-top: 10px">

                </div>
                <br>
            </div>
            <br>
        </fieldset>
        <hr class="layui-bg-green">
        <br>
        <br>
        <br>
        <br>
    </div>
</div>

<div class="layui-fluid">
    <br>
    <h2 th:text="${resourceName}"></h2>
    <br>
    <br>
    <div id="content">

    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/util.js}"></script>
<script type="text/javascript" th:inline="javascript">

    var docs = [[${docs}]];

    var lay = null;

    layui.config({
        base: '/restdoc/layui/lay/extends/'
    }).use([
        'util',
        'layer',
        'element',
        'jquery',
        'table',
        'tree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;
        lay = layer;

        util.fixbar({
            bar1: true,
            click: function (type) {
                if (type === 'bar1') {
                    alert('点击了bar1')
                }
            },
            css: {right: 10, top: 20}
        });
        renderDocs(docs);
    });

    function renderDocs(allDocs) {
        var allRows = "";
        let html = $('#hideDocDiv').html();
        let length = allDocs.length;

        for (let i = 0; i < allDocs.length; i++) {
            allRows = allRows + html
        }
        $('#content').html(allRows);

        let docLines = $('#content').find('.one-row');

        for (let i = 0; i < length; i++) {
            renderDoc(allDocs[i], docLines[i])
        }
    }

    function renderDoc(doc, docHtmlLine) {
        var jqLine = $(docHtmlLine);
        jqLine.find('fieldset').attr('id', doc['id']);
        jqLine.find('.methodName').html(doc['methodName']);
        jqLine.find('.methodLocation').html(doc['javaClassName'] + '#' + doc['methodName']);
        jqLine.find('.docDescription').html(doc['desc']);

        var fun;
        if (doc['paramDescriptors'] != null && doc['paramDescriptors'].length > 0)
            fun = "testHasInParamService(" + doc['id'] + ")";
        else fun = "testNonInParamService(" + doc['id'] + ")";


        jqLine.find('.layui-btn-container').html('<br><button onclick=' + fun + ' style="margin-left: 90%" class="layui-btn  layui-btn-lg">测试服务</button>');
        renderInParamTable(doc, jqLine);
        renderOutParamTable(doc, jqLine);
        renderDubboDocDescription(doc, jqLine);
    }

    function renderInParamTable(doc, jqLine) {
        var paramDescriptors = doc['paramDescriptors'];
        var tr = jqLine.find('.inParamTableBody');
        var allTrLine = "";
        if (paramDescriptors != null && paramDescriptors.length > 0) {
            for (let i = 0; i < paramDescriptors.length; i++) {
                var param = "'" + doc['id'] + "'," + "'" + paramDescriptors[i]['name'] + "'";
                var fun = "openEditInParamPage(" + param + ")";
                var start = "<tr ondblclick=" + fun + ">", end = "</tr>";
                var line = "<td>" + paramDescriptors[i].name + "</td><td>" + paramDescriptors[i].type + "</td><td>" + paramDescriptors[i].sampleValue + "</td><td>" + paramDescriptors[i].description + "</td>";
                var trLine = start + line + end;
                allTrLine = allTrLine + trLine;
            }
        } else {
            allTrLine = "<tr><td colspan='4' style='color: #FF5722;text-align: center'>无入参</td></tr>"
        }
        $(tr).html(allTrLine)
    }

    function renderOutParamTable(doc, jqLine) {
        var returnValueDescriptor = doc['returnValueDescriptor'];
        var tr = jqLine.find('.outParamTableBody');
        var param = "'" + doc['id'] + "'";
        var fun = "openEditOutParamPage(" + param + ")";
        var allTrLine = "<tr ondblclick=" + fun + "><td>" + returnValueDescriptor['type'] + "</td><td>" + returnValueDescriptor['sampleValue'] + "</td><td>" + returnValueDescriptor['description'] + "</td></tr>";
        $(tr).html(allTrLine)
    }

    function renderDubboDocDescription(doc, jqLine) {
        var param = "'" + doc['id'] + "'";
        var fun = "openEditDescriptionPage(" + param + ")";
        var line = "<blockquote ondblclick=" + fun + " class=\"layui-elem-quote docDescription\">" + doc['desc'] + "</blockquote>";
        $(jqLine.find(".dubboDocDescription")).html(line)

    }

    function openEditDescriptionPage(docId) {
        lay.open({
            type: 2,
            title: "编辑服务描述",
            area: ['800px', '600px'],
            content: ['/restdoc/dubboDocument/' + docId + '/description/view', 'no'],
            btn: ["保存", "取消"],
            yes: function (index, dom) {
                // return string
                var res = window["layui-layer-iframe" + index].getValue();
                var doc = updateDocument(docId, res);

                if (doc != null) {
                    var id = doc['id'];
                    renderDubboDocDescription(doc, $('#' + id))
                }
                lay.close(index)
            }
        });
    }

    function openEditInParamPage(docId, paramName) {
        lay.open({
            type: 2,
            title: "编辑服务入参",
            area: ['800px', '600px'],
            content: ['/restdoc/dubboDocument/' + docId + '/snippet/view?type=in&paramName=' + paramName, 'no'],
            btn: ["保存", "取消"],
            yes: function (index, dom) {
                var res = window["layui-layer-iframe" + index].getValue();
                var doc = updateDocument(docId, {"paramDescriptor": res});

                if (doc != null) {
                    var id = doc['id'];
                    renderInParamTable(doc, $('#' + id))
                }
                console.info(doc);
                lay.close(index)
            }
        });
    }

    function openEditOutParamPage(docId) {
        lay.open({
            type: 2,
            title: "编辑服务出参",
            area: ['800px', '600px'],
            content: ['/restdoc/dubboDocument/' + docId + '/snippet/view?type=out', 'no'],
            btn: ["保存", "取消"],
            yes: function (index, dom) {
                var res = window["layui-layer-iframe" + index].getValue();
                var doc = updateDocument(docId, {"returnValueDescriptor": res});

                if (doc != null) {
                    var id = doc['id'];
                    renderOutParamTable(doc, $('#' + id))
                }
                console.info(doc);
                lay.close(index)
            }
        });
    }

    function updateDocument(docId, data) {
        var returnValue = null;
        $.ajax({
            method: 'PATCH',
            url: '/restdoc/dubboDocument/' + docId + '/',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            data: JSON.stringify(data),
            async: false,
            success: function (data) {
                if ('200' === data['code']) {
                    returnValue = data['data'];
                    layer.msg("文档修改成功");
                } else {
                    layer.msg(data['message']);
                }
            }
        });
        return returnValue;
    }

    function testNonInParamService(docId) {
    }

    function testHasInParamService(docId) {
        lay.open({
            type: 2,
            title: "填充服务参数",
            area: ['1000px', '500px'],
            content: '/restdoc/dubboDocument/' + docId + '/param/fill/view',
            btn: ["确定", "取消"],
            yes: function (index, dom) {
                var res = window["layui-layer-iframe" + index].getValue();

                console.info(res);

                if (res['clientId'] == null) {
                    layer.msg("请选择服务实例")
                } else {
                    // 打开新窗口
                    testWithData(docId, res);
                    lay.close(index)
                }
            }
        });
    }

    function testWithData(docId, data) {
        $.ajax({
            method: 'POST',
            url: '/restdoc/dubboDocument/' + docId + '/test',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            data: JSON.stringify(data),
            async: false,
            success: function (data) {
                if ('200' === data['code']) {
                    var resdata = data['data'];

                    $('#execute-result-method').html(resdata['method']);
                    $('#execute-result-isSuccess').html(resdata['success']);
                    $('#execute-result-time').html(resdata['time'] + '毫秒');
                    $('#execute-result-returnType').html(resdata['returnType']);
                    $('#execute-result-errorMessage').html(resdata['errorMessage']);
                    $('#execute-result-print').html(resdata['returnValue']);
                    $('#execute-result-paramTypes').html(resdata['paramTypes']);

                    lay.open({
                        type: 1,
                        title: "执行结果详情",
                        area: ['1000px', '600px'],
                        content: $('#dubboExecuteResult'),
                        btn: ["关闭"],
                        yes: function (index, dom) {
                            lay.closeAll();
                        }
                    });
                } else {
                    layer.msg(data['message']);
                }
            }
        });
    }

</script>


</body>
</html>